<template>
	<view class="home">
		<custom-navbar :title='project.project_title' :show-back="true" @back="handleBack" />

		<view class="content pb150" :style="{ paddingTop: navBarHeight + 'px' }">
			<view class="topVR fcc space_image">
				<image :src="space.space_image"></image>
				<view class="vr fcc">
					<image class="wh40" src="/static/images/plant/vr.svg"></image>
				</view>


			</view>
			<view class="details">
				<view class="mt30 p0030">
					<view class="fcsb  ">
						<view class="f30bc0">{{space.space_title}}</view>
						<view class="fcolcc" @click="toggleCollection">
							<image v-if="is_collection == 0" class="wh40" src="/static/images/talents/未收藏.svg">
							</image>
							<image v-else class="wh40" src="/static/images/talents/已收藏.svg"></image>
							<view class="f20bc3">收藏</view>
						</view>
					</view>
					<view class="f245c9">
						租金参考价
					</view>
					<view class="mb45 f30bcFF0C10">{{space.rent_price}}元/㎡/月</view>
					<view class="fc ">
						<image class="wh28" src="/static/images/plant/位置.svg"></image>
						<view class="f245c3">{{space.address}}
						</view>
					</view>
					<up-line margin='20rpx 0 20rpx 0'></up-line>
					<view class="fcsb mb30">
						<view>
							<view class="f225c9">建筑面积</view>
							<view class="f28bc3">{{space.building_area}}㎡</view>
						</view>
						<view>
							<view class="f225c9">租赁面积</view>
							<view class="f28bc3">{{space.rent_area}}㎡</view>
						</view>
						<view>
							<view class="f225c9">租售性质</view>
							<view class="f28bc3">{{space.rent_nature_text}}</view>
						</view>
						<view>
							<view class="f225c9">主要用途</view>
							<view class="f28bc3">{{space.main_use}}</view>
						</view>
					</view>

				</view>
				<view class="w100" style="height: 20rpx;background: #F6F6F6;">
				</view>
				<view class="p0030">
					<view class="mt40">
						<view class="tilte mb30">
							<view class="f36bc0">项目信息</view>
							<image class="tliteimg" src="/static/images/home/波浪.svg"></image>
						</view>
						<view>
							<view class="fcsb mb12">
								<view class="f24c6">占地面积</view>
								<view class="f24Bc3">{{project.floor_area}}</view>
							</view>
							<view class="fcsb mb12">
								<view class="f24c6">容积率</view>
								<view class="f24Bc3">{{project.plot_ratio}}</view>
							</view>
							<view class="fcsb mb12">
								<view class="f24c6">建设竣工时间</view>
								<view class="f24Bc3">{{project.completion_time}}</view>
							</view>
							<view class="fcsb mb12">
								<view class="f24c6">楼栋数</view>
								<view class="f24Bc3">{{project.building_number}}</view>
							</view>
							<view class="fcsb mb12">
								<view class="f24c6">标准层层高</view>
								<view class="f24Bc3">{{project.standard_height}}</view>
							</view>
						</view>

					</view>
					<up-line margin='30rpx 0 40rpx 0'></up-line>
					<view class="mt40">
						<view class="tilte mb30">
							<view class="f36bc0">收费标准</view>
							<image class="tliteimg" src="/static/images/home/波浪.svg"></image>
						</view>
						<view>
							<view class="fcsb mb12">
								<view class="f24c6">物业管理费</view>
								<view class="f24Bc3">{{project.property_management_fee}}</view>
							</view>
							<view class="fcsb mb12">
								<view class="f24c6">空调费</view>
								<view class="f24Bc3">{{project.air_conditioning_fee}}</view>
							</view>

						</view>

					</view>
					<up-line margin='30rpx 0 40rpx 0'></up-line>
					<view class="mt40">
						<view class="tilte mb30">
							<view class="f36bc0">配套设施</view>
							<image class="tliteimg" src="/static/images/home/波浪.svg"></image>
						</view>
						<view>
							<view class="fcsb mb12">
								<view class="f24c6">配套食堂</view>
								<view class="f24Bc3">{{project.supporting_canteen}}</view>
							</view>
							<view class="fcsb mb12">
								<view class="f24c6">中央空调</view>
								<view class="f24Bc3">{{project.central_air_conditioning}}</view>
							</view>
							<view class="fcsb mb12">
								<view class="f24c6">配套宿舍</view>
								<view class="f24Bc3">{{project.supporting_dormitory}}</view>
							</view>
							<view class="fcsb mb12">
								<view class="f24c6">配电量</view>
								<view class="f24Bc3">12340（㎡）</view>
							</view>
							<view class="fcsb mb12">
								<view class="f24c6">客梯数量</view>
								<view class="f24Bc3">{{project.passenger_elevators_number}}</view>
							</view>
							<view class="fcsb mb12">
								<view class="f24c6">货梯数量</view>
								<view class="f24Bc3">{{project.freight_elevator_number}}</view>
							</view>
							<view class="fcsb mb12">
								<view class="f24c6">客梯载重量</view>
								<view class="f24Bc3">{{project.passenger_elevators_load_bearing}}</view>
							</view>
						</view>
					</view>
					<view class="mt40">
						<view class="tilte mb30">
							<view class="f36bc0">更多展示图</view>
							<image class="tliteimg" src="/static/images/home/波浪.svg"></image>
						</view>
						<view>
							<mp-html :content="space.space_detail" />
						</view>

					</view>
				</view>
			</view>

			<view class="share w100 p2030 fcsb">
				<!-- 	<view @click="handleShare" class="fc">
					<image class="wh40" src="/static/images/activity/分享.svg"></image>
					<view class="f20bc3">我要分享</view>
				</view> -->
				<button open-type="share" class="share-btn"
					style="background: none; border: none; padding: 0; margin: 0; line-height: 1;border-radius: 0;">
					<image src="/static/images/activity/分享.svg" class="wh40"></image>
					<view class="f20bc3">我要分享</view>
				</button>
				<view class="btn fcc" @click="submit()">
					<view class="f24bcf">预约考察</view>
				</view>
			</view>
		</view>

	</view>

</template>

<script setup>
	import CustomNavbar from '@/components/custom-navbar.vue'
	import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html'
	import {
		ref,
		onMounted,
		computed
	} from 'vue';
	import {
		onLoad,
		onReachBottom,
		onShow,
		onPullDownRefresh,
		onShareAppMessage,
		onShareTimeline
	} from '@dcloudio/uni-app'
	import {
		getCurrentInstance
	} from 'vue'
	import {
		SpaceDetail
	} from '@/api/plant'
	import {
		saveCollection
	} from '@/api/login' // or wherever your API is located

	// 获取全局cdn方法
	const {
		proxy
	} = getCurrentInstance()
	const cdn = (path) => proxy.$cdn + path
	// 2. 获取系统信息（同步操作放在setup最前面）
	const systemInfo = uni.getSystemInfoSync()

	// 3. 定义响应式数据
	const searchKey = ref('')

	// 4. 计算属性
	const navBarHeight = computed(() => systemInfo.statusBarHeight + 44)

	// 初始化
	onMounted(() => {

		setTimeout(() => {
			const pages = getCurrentPages()
			const currentPage = pages[pages.length - 1]
			const options = currentPage.options
			space_id.value = options.space_id

			fetchpolicyDetail()
		}, 100)
	})
	// 初始化
	// 获取路由参数
	const space_id = ref(null)
	const policyDetail = ref({})
	const space = ref({})
	const project = ref({})
	const is_collection = ref(0)
	// 获取活动详情
	const fetchpolicyDetail = async () => {

		try {
			if (!space_id.value) {
				throw new Error('缺少活动ID参数')
			}
			const params = {
				space_id: space_id.value,
			}
			const res = await SpaceDetail(params)
			if (res.code === 200) {
				space.value = res.data.space
				project.value = res.data.project
				is_collection.value = res.data.is_collection

			} else {
				throw new Error(res.message || '获取详情失败')
			}
		} catch (error) {
			console.error('获取活动详情失败:', error)
			uni.showToast({
				title: error.message,
				icon: 'none'
			})
			// 可以在这里返回上一页
			// uni.navigateBack()
		}
	}
	const isFromShare = ref(false)
	onLoad((options) => {
		if (options.share === 'true') {
			// 标记是分享进入的
			isFromShare.value = true;
		}
	});

	const handleBack = () => {
		if (isFromShare.value || getCurrentPages().length <= 1) {
			uni.switchTab({
				url: '/pages/index/index'
			});
		} else {
			uni.navigateBack();
		}
	};
	const submit = () => {
		uni.navigateTo({
			url: `/pages/plant/submit?project_id=${project.value.project_id}&space_id=${space.value.space_id}&project_name=${space.value.space_title}`
		})
	}
	const toggleCollection = async () => {
		try {
			const res = await saveCollection({
				type: 4, // 4 represents space (厂房)
				collection_id: space.value.space_id // using space_id as the collection_id
			})

			if (res.code === 200) {
				// is_collection.value = !is_collection.value // toggle collection status

				uni.showToast({
					title: is_collection.value == 0 ? '收藏成功' : '已取消收藏',
					icon: 'none'
				})
				fetchpolicyDetail()
			} else {
				throw new Error(res.message || '操作失败')
			}
		} catch (error) {
			console.error('收藏操作失败:', error)
			uni.showToast({
				title: error.message,
				icon: 'none'
			})
		}
	}
	// const handleShare = () => {
	// 	// 1. 检查是否在微信环境
	// 	const {
	// 		platform
	// 	} = uni.getSystemInfoSync();
	// 	const isWechat = ['ios', 'android', 'devtools'].includes(platform);

	// 	if (!isWechat) {
	// 		uni.showToast({
	// 			title: '当前环境不支持分享',
	// 			icon: 'none'
	// 		});
	// 		return;
	// 	}

	// 	// 2. 检查是否支持 `uni.share`
	// 	if (!uni.canIUse('share')) {
	// 		uni.showToast({
	// 			title: '当前微信版本过低，不支持分享',
	// 			icon: 'none'
	// 		});
	// 		return;
	// 	}

	// 	// 3. 调用分享
	// 	uni.share({
	// 		provider: 'weixin',
	// 		scene: 'WXSceneSession', // 分享到聊天
	// 		type: 0,
	// 		title: space.value.space_title || '优质厂房空间',
	// 		summary: '点击查看详情', // 非必填
	// 		href: `/pages/plant/detail?space_id=${space_id.value}`,
	// 		imageUrl: space.value.space_image || '/static/share.jpg',
	// 		success: () => uni.showToast({
	// 			title: '分享成功',
	// 			icon: 'none'
	// 		}),
	// 		fail: (err) => {
	// 			console.error('分享失败:', err);
	// 			uni.showToast({
	// 				title: '分享失败',
	// 				icon: 'none'
	// 			});
	// 		}
	// 	});
	// };
	// const handleShareToTimeline = () => {
	// 	if (uni.getSystemInfoSync().platform !== 'devtools' &&
	// 		uni.getSystemInfoSync().platform !== 'ios' &&
	// 		uni.getSystemInfoSync().platform !== 'android') {
	// 		uni.showToast({
	// 			title: '当前环境不支持分享',
	// 			icon: 'none'
	// 		})
	// 		return
	// 	}

	// 	uni.share({
	// 		provider: 'weixin',
	// 		scene: 'WXSceneTimeline', // 分享到朋友圈
	// 		type: 0,
	// 		title: `${space.value.space_title} | ${space.value.rent_price}元/㎡/月`, // 朋友圈标题更简洁
	// 		imageUrl: space.value.space_image || '/static/share.jpg',
	// 		href: `/pages/plant/detail?space_id=${space_id.value}`,
	// 		success: (res) => {
	// 			console.log('分享到朋友圈成功', res)
	// 		},
	// 		fail: (err) => {
	// 			console.log('分享到朋友圈失败', err)
	// 		}
	// 	})
	// }
	// 页面级分享配置（ 用户点击右上角分享时触发）
	onShareAppMessage(() => {
		console.log('分享数据:', {
			title: `${project.value.project_title}`,
			path: `/pages/plant/detail?space_id=${space_id.value}&share=${true}`,
			imageUrl: space.value.space_image || '/static/share.jpg'
		});

		return {
			title: `${project.value.project_title}`,
			path: `/pages/plant/details?space_id=${space_id.value}`,
			imageUrl: space.value.space_image || '/static/share.jpg'
		};
	});
	// 朋友圈分享配置（微信小程序独有）
	onShareTimeline(() => {
		return {
			title: `${space.value.space_title} | ${space.value.rent_price}元/㎡/月`,
			query: `space_id=${space_id.value}`,
			imageUrl: space.value.space_image || '/static/share.jpg'
		}
	})
</script>

<style lang="scss" scoped>
	.home {
		width: 100%;
		min-height: 100vh;
		overflow: hidden; // 防止页面整体滚动

		.content {
			padding-top: var(--status-bar-height);
			padding-top: calc(var(--status-bar-height) + 70rpx);
			/* 导航栏高度 */
			height: 100%;
			display: flex;
			flex-direction: column;

			.topVR {
				// background: paleturquoise;
				height: 348rpx;
				position: relative;

				.vr {
					position: absolute;
					width: 80rpx;
					height: 80rpx;
					background: #000000;
					border-radius: 50%;
					opacity: 0.4;


				}


			}

			.details {
				width: 100%;
				background: #FFFFFF;
				border-radius: 20rpx 20rpx 0rpx 0rpx;
				position: relative;
				top: -20rpx;

				.tilte {
					position: relative;

					.tliteimg {
						width: 75rpx;
						height: 15.37rpx;
						position: absolute;
						bottom: -8rpx;
						left: 35rpx;
					}
				}
			}


			// flex-direction: column;
			// align-items: center;
			// justify-content: center;

			.share {
				position: fixed;
				bottom: 0;
				width: 100%;
				height: 120rpx;

				background: #FFFFFF;
				box-shadow: 0rpx 6rpx 20rpx 0rpx rgba(41, 44, 54, 0.2);
				border-radius: 0rpx 0rpx 0rpx 0rpx;

				.share-btn {
					background: none !important; // 移除背景
					border: none !important; // 移除边框
					padding: 0 !important; // 移除内边距
					margin: 0 !important; // 移除外边距
					line-height: 1; // 防止文字偏移
					display: inline-flex; // 保持 flex 布局
					align-items: center; // 垂直居中
					justify-content: center; // 水平居中

					&::after {
						display: none; // 移除微信 button 默认的 after 伪元素（可能带边框）
					}
				}

				.btn {
					width: 500rpx;
					height: 80rpx;
					background: linear-gradient(90deg, #398DFB 0%, #61DBFF 100%);
					border-radius: 10rpx 10rpx 10rpx 10rpx;
				}
			}

		}

	}
</style>